<script lang="ts" setup>
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { getinfoarr } from "@/api/home"
import { onMounted } from "vue"
import { type Ref } from "vue"
import { useRouter } from "vue-router"
import infoarr from "@/components/infoarr.vue"
const activeName = ref('first')
let router = useRouter()
const handleClick = (tab: TabsPaneContext, event: Event) => {
}
let fList: Ref<any[]> = ref([])
let sList: Ref<any[]> = ref([])
let tList: Ref<any[]> = ref([])
let fouList: Ref<any[]> = ref([])
let fiList: Ref<any[]> = ref([])
onMounted(() => {
    getinfoarr().then(res => {
        // console.log(res.data[1]);

        for (let i = 0; i < res.data.length; i++) {
            if (res.data[i].type == '推荐') {
                fList.value.push(res.data[i])
            }
            else if (res.data[i].type == 'Steam') {
                sList.value.push(res.data[i])
            }
            else if (res.data[i].type == 'Switch') {
                tList.value.push(res.data[i])
            }
            else if (res.data[i].type == 'PS4') {
                fouList.value.push(res.data[i])
            }
            else if (res.data[i].type == 'PS5') {
                fiList.value.push(res.data[i])
            }
        }
        // console.log(fList);

    })
})
</script>
<template>
    <div style="padding: 10px;">
        <el-button @click="router.back()">返回</el-button>
        <el-tabs v-model="activeName" stretch class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="推荐" name="first">
                <infoarr v-for="it in fList" :key="it.id" :it="it"></infoarr>
            </el-tab-pane>
            <el-tab-pane label="Steam" name="second">
                <infoarr v-for="it in sList" :key="it.id" :it="it"></infoarr>
            </el-tab-pane>
            <el-tab-pane label="Switch" name="third">
                <infoarr v-for="it in tList" :key="it.id" :it="it"></infoarr>
            </el-tab-pane>
            <el-tab-pane label="PS4" name="fourth">
                <infoarr v-for="it in fouList" :key="it.id" :it="it"></infoarr>
            </el-tab-pane>
            <el-tab-pane label="PS5" name="five">
                <infoarr v-for="it in fiList" :key="it.id" :it="it"></infoarr>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<style lang="scss" scoped>
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}
</style>